<template>
  <el-tabs
    v-model="activeName"
    type="card"
    class="demo-tabs"
    @tab-click="handleClick"
  >
    <el-tab-pane label="高血压" name="first">
      <div class="demo-date-picker">
      <!-- 搜索表单 -->
      <el-form label-width="auto" style="max-width: 100%">
          <el-row>
              <el-col :span="5">
          <el-form-item label=" 姓名:">
              <el-input
                v-model="queryDto.name"
                placeholder="姓名"
              ></el-input>
          </el-form-item>
          </el-col>
          <el-col :span="8">
          <el-form-item label="身份证号:" style="margin-left: 20px;margin-right: 20px">
                  <el-input
                v-model="queryDto.idNumber"
                placeholder="身份证号"
                  ></el-input>
              </el-form-item>
              </el-col>
              <el-col :span="10">
          <el-form-item label="建档时间:">
    <el-date-picker
      v-model="createTimes"
      type="daterange"
      unlink-panels
      range-separator="To"
      start-placeholder="开始时间"
      end-placeholder="结束时间"
      :shortcuts="shortcuts"
      :size="size"
      format="YYYY-MM-DD"
      value-format="YYYY-MM-DD"
    />
          </el-form-item>
              </el-col>
          </el-row>
          
  <el-row style="display:flex">
      <el-button type="primary" size="small" @click="searchSysRole">
          搜索
      </el-button>
      <el-button size="small" @click="resetData">重置</el-button>
  </el-row>
</el-form>
      <!-- 添加按钮 -->
      <div class="tools-div">
          <el-button type="success" size="small" @click="addShow()">添 加</el-button>
      </div>
      <el-dialog v-model="dialogVisible" :title="tit" width="70%">
      <el-form label-width="120px">
          <el-row :gutter="40">
              <el-col :span="6">
          <el-form-item label="姓名:">
              <el-input v-model="patient.name"/>
          </el-form-item>
      </el-col>
      <el-col :span="6">
          <el-form-item label="身份证号:">
              <el-input  v-model="patient.idNumber"/>
          </el-form-item>
      </el-col>
          <el-col :span="6">
          <el-form-item label="联系方式:">
              <el-input v-model="patient.phone"/>
          </el-form-item>
      </el-col>
          <el-col :span="6">
              <el-form-item label="性别:">
              <el-radio-group v-model="patient.sex">
                  <el-radio :label="1">男</el-radio>
                  <el-radio :label="2">女</el-radio>
              </el-radio-group>
          </el-form-item>
      </el-col>
      </el-row>
      <el-row :gutter="20">
          <el-col :span="6">
              <el-form-item label="年龄:">
                  <el-input v-model="patient.age"/>
              </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="民族:">
                  <el-input v-model="patient.nationId"/>
              </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="婚姻状况:">
                  <el-input  v-model="patient.maritalId"/>
              </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="文化程度:">
                  <el-input  v-model="patient.standardId"/>
              </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
          <el-col :span="6">
              <el-form-item label="职业:">
                  <el-input  v-model="patient.occupationId"/>
              </el-form-item>
          </el-col>
          <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
          <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
          <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
      </el-row>
      <el-form-item label="家庭地址:">
              <el-input v-model="patient.address"/>
          </el-form-item>
          <el-form-item label="标签:">
              <el-input  v-model="patient.tag"/>
          </el-form-item>
          <el-form-item label="头像">
              <el-upload
                          class="avatar-uploader"
                          action="http://localhost:8501/sys/patient/fileUpload"
                          :show-file-list="show"
                          :on-success="handleAvatarSuccess"
                          :headers="headers"
                  >
                  <img v-if="patient.img" :src="patient.img" class="avatar" />
                  <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
          </el-form-item>
          <el-form-item label="医师:">
              <el-input  v-model="patient.physician"/>
          </el-form-item>
          <el-form-item label="健康管理师:">
              <el-input  v-model="patient.thmanager"/>
          </el-form-item>
          <el-form-item label="档案来源:">
              <el-input  v-model="patient.archivalSource"/>
          </el-form-item>
          <el-form-item label="风险等级:">
              <el-input  v-model="patient.risk"/>
          </el-form-item>
          <el-form-item>
              <el-button type="primary" @click="addpatient()">提交</el-button>
              <el-button @click="dialogVisible = false">取消</el-button>
          </el-form-item>
      </el-form>
  </el-dialog> 
      
      <!--- 角色表格数据 -->
      <el-table :data="list" style="width: 100%">
          <el-table-column prop="id" label="序号" width="60" />
          <el-table-column prop="name" label="姓名" width="60" />
          
          <el-table-column prop="sex" label="性别"  width="60"  #default="scope">
              {{ scope.row.sex == 1 ? '男' : '女' }}
          </el-table-column>
          
          <el-table-column prop="phone" label="联系方式"/>
          <el-table-column prop="address" label="家庭地址" />
          <el-table-column prop="idnumber" label="身份证号" />
          <el-table-column prop="img" label="头像"  #default="scope">
              <img :src="scope.row.img" width="100" />
          </el-table-column>
          <el-table-column prop="tag" label="标签" width="80"  />
          <el-table-column prop="physician" label="医师" width="60"  />
          <el-table-column prop="thmanager" label="健康管理师"  width="80" />
          <el-table-column prop="dateTime" label="建档日期" />
          <el-table-column prop="url" label="管理等级"  #default="scope">
              <img :src="scope.row.url" width="100" />
          </el-table-column>
          <el-table-column prop="archivalSource" label="档案来源" width="150"/>
          <el-table-column label="操作" align="center" width="280" #default="scope">
          <el-button type="primary" size="small" @click="addShow(scope.row)">
              修改
          </el-button>
          <el-button type="danger" size="small" @click="deleteById(scope.row)">
              删除
          </el-button>
          </el-table-column>
      </el-table>

   <!--分页条-->
<el-pagination
             v-model:current-page="pageParams.page"
             v-model:page-size="pageParams.limit"
             :page-sizes="[2,5,10, 20, 50, 100]"
             @size-change="fetchData"
             @current-change="fetchData"
             layout="total, sizes, prev, pager, next"
             :total="total"
/>
</div>
    </el-tab-pane>
    <el-tab-pane label="糖尿病" name="second">
        <div class="demo-date-picker">
      <!-- 搜索表单 -->
      <el-form label-width="auto" style="max-width: 100%">
          <el-row>
              <el-col :span="5">
          <el-form-item label=" 姓名:">
              <el-input
                v-model="queryDto.name"
                placeholder="姓名"
              ></el-input>
          </el-form-item>
          </el-col>
          <el-col :span="8">
          <el-form-item label="身份证号:" style="margin-left: 20px;margin-right: 20px">
                  <el-input
                v-model="queryDto.idNumber"
                placeholder="身份证号"
                  ></el-input>
              </el-form-item>
              </el-col>
              <el-col :span="10">
          <el-form-item label="建档时间:">
    <el-date-picker
      v-model="createTimes"
      type="daterange"
      unlink-panels
      range-separator="To"
      start-placeholder="开始时间"
      end-placeholder="结束时间"
      :shortcuts="shortcuts"
      :size="size"
      format="YYYY-MM-DD"
      value-format="YYYY-MM-DD"
    />
          </el-form-item>
              </el-col>
          </el-row>
          
  <el-row style="display:flex">
      <el-button type="primary" size="small" @click="searchSysRole">
          搜索
      </el-button>
      <el-button size="small" @click="resetData">重置</el-button>
  </el-row>
</el-form>
      <!-- 添加按钮 -->
      <div class="tools-div">
          <el-button type="success" size="small" @click="addShow()">添 加</el-button>
      </div>
      <el-dialog v-model="dialogVisible" :title="tit" width="70%">
      <el-form label-width="120px">
          <el-row :gutter="40">
              <el-col :span="6">
          <el-form-item label="姓名:">
              <el-input v-model="patient.name"/>
          </el-form-item>
      </el-col>
      <el-col :span="6">
          <el-form-item label="身份证号:">
              <el-input  v-model="patient.idNumber"/>
          </el-form-item>
      </el-col>
          <el-col :span="6">
          <el-form-item label="联系方式:">
              <el-input v-model="patient.phone"/>
          </el-form-item>
      </el-col>
          <el-col :span="6">
              <el-form-item label="性别:">
              <el-radio-group v-model="patient.sex">
                  <el-radio :label="1">男</el-radio>
                  <el-radio :label="2">女</el-radio>
              </el-radio-group>
          </el-form-item>
      </el-col>
      </el-row>
      <el-row :gutter="20">
          <el-col :span="6">
              <el-form-item label="年龄:">
                  <el-input v-model="patient.age"/>
              </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="民族:">
                  <el-input v-model="patient.nationId"/>
              </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="婚姻状况:">
                  <el-input  v-model="patient.maritalId"/>
              </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="文化程度:">
                  <el-input  v-model="patient.standardId"/>
              </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
          <el-col :span="6">
              <el-form-item label="职业:">
                  <el-input  v-model="patient.occupationId"/>
              </el-form-item>
          </el-col>
          <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
          <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
          <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
      </el-row>
      <el-form-item label="家庭地址:">
              <el-input v-model="patient.address"/>
          </el-form-item>
          <el-form-item label="标签:">
              <el-input  v-model="patient.tag"/>
          </el-form-item>
          <el-form-item label="头像">
              <el-upload
                          class="avatar-uploader"
                          action="http://localhost:8501/sys/patient/fileUpload"
                          :show-file-list="show"
                          :on-success="handleAvatarSuccess"
                          :headers="headers"
                  >
                  <img v-if="patient.img" :src="patient.img" class="avatar" />
                  <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
          </el-form-item>
          <el-form-item label="医师:">
              <el-input  v-model="patient.physician"/>
          </el-form-item>
          <el-form-item label="健康管理师:">
              <el-input  v-model="patient.thmanager"/>
          </el-form-item>
          <el-form-item label="档案来源:">
              <el-input  v-model="patient.archivalSource"/>
          </el-form-item>
          <el-form-item label="风险等级:">
              <el-input  v-model="patient.risk"/>
          </el-form-item>
          <el-form-item>
              <el-button type="primary" @click="addpatient()">提交</el-button>
              <el-button @click="dialogVisible = false">取消</el-button>
          </el-form-item>
      </el-form>
  </el-dialog> 
      
      <!--- 角色表格数据 -->
      <el-table :data="list" style="width: 100%">
          <el-table-column prop="id" label="序号" width="60" />
          <el-table-column prop="name" label="姓名" width="60" />
          
          <el-table-column prop="sex" label="性别"  width="60"  #default="scope">
              {{ scope.row.sex == 1 ? '男' : '女' }}
          </el-table-column>
          
          <el-table-column prop="phone" label="联系方式"/>
          <el-table-column prop="address" label="家庭地址" />
          <el-table-column prop="idnumber" label="身份证号" />
          <el-table-column prop="img" label="头像"  #default="scope">
              <img :src="scope.row.img" width="100" />
          </el-table-column>
          <el-table-column prop="tag" label="标签" width="80"  />
          <el-table-column prop="physician" label="医师" width="60"  />
          <el-table-column prop="thmanager" label="健康管理师"  width="80" />
          <el-table-column prop="dateTime" label="建档日期" />
          <el-table-column prop="url" label="管理等级"  #default="scope">
              <img :src="scope.row.url" width="100" />
          </el-table-column>
          <el-table-column prop="archivalSource" label="档案来源" width="150"/>
          <el-table-column label="操作" align="center" width="280" #default="scope">
          <el-button type="primary" size="small" @click="addShow(scope.row)">
              修改
          </el-button>
          <el-button type="danger" size="small" @click="deleteById(scope.row)">
              删除
          </el-button>
          </el-table-column>
      </el-table>

   <!--分页条-->
<el-pagination
             v-model:current-page="pageParams.page"
             v-model:page-size="pageParams.limit"
             :page-sizes="[2,5,10, 20, 50, 100]"
             @size-change="fetchData"
             @current-change="fetchData"
             layout="total, sizes, prev, pager, next"
             :total="total"
/>
</div>
    </el-tab-pane>
    <el-tab-pane label="心冠病" name="third">
        <div class="demo-date-picker">
      <!-- 搜索表单 -->
      <el-form label-width="auto" style="max-width: 100%">
          <el-row>
              <el-col :span="5">
          <el-form-item label=" 姓名:">
              <el-input
                v-model="queryDto.name"
                placeholder="姓名"
              ></el-input>
          </el-form-item>
          </el-col>
          <el-col :span="8">
          <el-form-item label="身份证号:" style="margin-left: 20px;margin-right: 20px">
                  <el-input
                v-model="queryDto.idNumber"
                placeholder="身份证号"
                  ></el-input>
              </el-form-item>
              </el-col>
              <el-col :span="10">
          <el-form-item label="建档时间:">
    <el-date-picker
      v-model="createTimes"
      type="daterange"
      unlink-panels
      range-separator="To"
      start-placeholder="开始时间"
      end-placeholder="结束时间"
      :shortcuts="shortcuts"
      :size="size"
      format="YYYY-MM-DD"
      value-format="YYYY-MM-DD"
    />
          </el-form-item>
              </el-col>
          </el-row>
          
  <el-row style="display:flex">
      <el-button type="primary" size="small" @click="searchSysRole">
          搜索
      </el-button>
      <el-button size="small" @click="resetData">重置</el-button>
  </el-row>
</el-form>
      <!-- 添加按钮 -->
      <div class="tools-div">
          <el-button type="success" size="small" @click="addShow()">添 加</el-button>
      </div>
      <el-dialog v-model="dialogVisible" :title="tit" width="70%">
      <el-form label-width="120px">
          <el-row :gutter="40">
              <el-col :span="6">
          <el-form-item label="姓名:">
              <el-input v-model="patient.name"/>
          </el-form-item>
      </el-col>
      <el-col :span="6">
          <el-form-item label="身份证号:">
              <el-input  v-model="patient.idNumber"/>
          </el-form-item>
      </el-col>
          <el-col :span="6">
          <el-form-item label="联系方式:">
              <el-input v-model="patient.phone"/>
          </el-form-item>
      </el-col>
          <el-col :span="6">
              <el-form-item label="性别:">
              <el-radio-group v-model="patient.sex">
                  <el-radio :label="1">男</el-radio>
                  <el-radio :label="2">女</el-radio>
              </el-radio-group>
          </el-form-item>
      </el-col>
      </el-row>
      <el-row :gutter="20">
          <el-col :span="6">
              <el-form-item label="年龄:">
                  <el-input v-model="patient.age"/>
              </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="民族:">
                  <el-input v-model="patient.nationId"/>
              </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="婚姻状况:">
                  <el-input  v-model="patient.maritalId"/>
              </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="文化程度:">
                  <el-input  v-model="patient.standardId"/>
              </el-form-item>
          </el-col>
      </el-row>
      <el-row :gutter="20">
          <el-col :span="6">
              <el-form-item label="职业:">
                  <el-input  v-model="patient.occupationId"/>
              </el-form-item>
          </el-col>
          <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
          <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
          <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
      </el-row>
      <el-form-item label="家庭地址:">
              <el-input v-model="patient.address"/>
          </el-form-item>
          <el-form-item label="标签:">
              <el-input  v-model="patient.tag"/>
          </el-form-item>
          <el-form-item label="头像">
              <el-upload
                          class="avatar-uploader"
                          action="http://localhost:8501/sys/patient/fileUpload"
                          :show-file-list="show"
                          :on-success="handleAvatarSuccess"
                          :headers="headers"
                  >
                  <img v-if="patient.img" :src="patient.img" class="avatar" />
                  <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
          </el-form-item>
          <el-form-item label="医师:">
              <el-input  v-model="patient.physician"/>
          </el-form-item>
          <el-form-item label="健康管理师:">
              <el-input  v-model="patient.thmanager"/>
          </el-form-item>
          <el-form-item label="档案来源:">
              <el-input  v-model="patient.archivalSource"/>
          </el-form-item>
          <el-form-item label="风险等级:">
              <el-input  v-model="patient.risk"/>
          </el-form-item>
          <el-form-item>
              <el-button type="primary" @click="addpatient()">提交</el-button>
              <el-button @click="dialogVisible = false">取消</el-button>
          </el-form-item>
      </el-form>
  </el-dialog> 
      
      <!--- 角色表格数据 -->
      <el-table :data="list" style="width: 100%">
          <el-table-column prop="id" label="序号" width="60" />
          <el-table-column prop="name" label="姓名" width="60" />
          
          <el-table-column prop="sex" label="性别"  width="60"  #default="scope">
              {{ scope.row.sex == 1 ? '男' : '女' }}
          </el-table-column>
          
          <el-table-column prop="phone" label="联系方式"/>
          <el-table-column prop="address" label="家庭地址" />
          <el-table-column prop="idnumber" label="身份证号" />
          <el-table-column prop="img" label="头像"  #default="scope">
              <img :src="scope.row.img" width="100" />
          </el-table-column>
          <el-table-column prop="tag" label="标签" width="80"  />
          <el-table-column prop="physician" label="医师" width="60"  />
          <el-table-column prop="thmanager" label="健康管理师"  width="80" />
          <el-table-column prop="dateTime" label="建档日期" />
          <el-table-column prop="url" label="管理等级"  #default="scope">
              <img :src="scope.row.url" width="100" />
          </el-table-column>
          <el-table-column prop="archivalSource" label="档案来源" width="150"/>
          <el-table-column label="操作" align="center" width="280" #default="scope">
          <el-button type="primary" size="small" @click="addShow(scope.row)">
              修改
          </el-button>
          <el-button type="danger" size="small" @click="deleteById(scope.row)">
              删除
          </el-button>
          </el-table-column>
      </el-table>

   <!--分页条-->
<el-pagination
             v-model:current-page="pageParams.page"
             v-model:page-size="pageParams.limit"
             :page-sizes="[2,5,10, 20, 50, 100]"
             @size-change="fetchData"
             @current-change="fetchData"
             layout="total, sizes, prev, pager, next"
             :total="total"
/>
</div>
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts" setup>
import type { TabsPaneContext } from 'element-plus'
import { ref,onMounted } from 'vue';
import { useApp } from '@/pinia/modules/app'
import { ElMessage, ElMessageBox } from 'element-plus'
import {GetSysRoleListByPage3tang,add,update,deletes} from '@/api/zsg/patient';

const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}





const headers = {
token: useApp().authorization.token     // 从pinia中获取token，在进行文件上传的时候将token设置到请求头中
}
// 图像上传成功以后的事件处理函数
const handleAvatarSuccess = (response,uploadFile) => {
  patient.value.img = response.data
}

// 分页条总记录数
let total = ref(0)

// 定义表格数据模型
let list = ref([
])
let tit=ref("")
const dialogVisible=ref(false)
const pageParamsForm={
  page:1,
  limit:2,
}
const pageParams = ref(pageParamsForm)     // 将pageParamsForm包装成支持响应式的对象
// 搜索表单数据
const queryDto = ref({
  name: "" ,
  idNumber:"",
})
// 页面加载完毕以后请求后端接口获取数据
onMounted(() => {
  fetchData() ;
})
// 搜索按钮点击事件处理函数
const searchSysRole = () => {
  //queryDto.value.roleName = ""
  fetchData() ;
}
// 远程调用后端分页查询接口
const fetchData = async () => {
  const {data , code , message } = await GetSysRoleListByPage3tang(pageParams.value.page , pageParams.value.limit , queryDto.value) ;
  console.log(data)
  list.value = data.list ;
  total.value = data.total
  // for(let a=0;a<=data.list.length;a++){
  //     if(data.list[a].sex=='1'){
  //         list.value[a].sex='男'
  //     }else{
  //         list.value[a].sex='女'
  //     }
      
  // }
}
const resetData=()=>{
  queryDto.value={}
}
// 定义提交表单数据模型
const defaultForm = {
  id:"",
  name: "" ,
  sex:"",
  phone: "" ,
  address:"",
  idNumber:"",
  tag:"",
  physician:"",
  thmanager:"",
  archivalSource:"",
  occupationId:"",
  maritalId:"",
  risk:"",
  img:"",
  url:"",
}
const patient = ref(defaultForm)
const addShow=(row)=>{
  if(row!=""){
      tit.value="修改个人信息"
      dialogVisible.value = true
      patient.value ={...row}
  }
  tit.value="添加个人信息"
  dialogVisible.value=true;

}
const addpatient=async()=>{
  console.log(patient.value.id)
  if(patient.value.id==null||patient.value.id==''){
  const {code , message , data} = await add(patient.value)
  if(code === 200) {
      dialogVisible.value = false
      ElMessage.success('操作成功')
      fetchData()
  }else {
      ElMessage.error(message)
  }
}else{
  console.log(patient.value.img)
  const {code , message , data} =  await update(patient.value)
  if(code === 200) {
      dialogVisible.value = false
      ElMessage.success('操作成功')
      fetchData()
  }else {
      ElMessage.error(message)
  }
}
}
const deleteById = (row) => {
  ElMessageBox.confirm('此操作将永久删除该记录, 是否继续?', 'Warning', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
  }).then(async () => {
     const {code } = await deletes(row)
     if(code === 200) {
          ElMessage.success('删除成功')
          fetchData()
     }
  })
}
</script>

<style>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
